<template>
    <view class="e_container">
        <image src="/static/english/english_top_bg.png" class="topBg" />
        <view class="appName">
            pep同步课本点读
        </view>
        <view class="swiper-box">
            <swiper class="swiper" circular @change="change" next-margin="68rpx" >
                <swiper-item v-for="(item,index) in props.swiperList" :key="index" >
                    <view class="swiper-item uni-bg-red">
                        <image :src="item" class="swiper-img" />
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="dot">
			<view v-for="(item, index) in props.swiperList.length" :key="'s'+index" :class="['dot_item', current === index ? 'active' : '']" ></view>
		</view>
        <view class="read">
            <image src="/static/english/english_read_bg.png" class="readBg"/>
            <view class="left">
                <view class="text1">
                    <span>同步点读书</span>
                    <image src="/static/english/tip.png" class="tipImg"/>
                </view>
                <view class="text2">
                    小学人教课本点读
                </view>
                <view class="text3">{{props.book.title}}</view>
                <view class="text4">{{props.book.description}}</view>
                <view class="button" @click="handleRead(props.book.id)">
                    开始点读
                </view>
            </view>
            <view class="right">
                <button open-type="share" class="share">
                    <span>分享到班级群</span>
                    <image src="/static/english/share.png" class="shareImg"/>
                </button>
                <view class="book">
                    <view class="deraction"></view>
                    <image :src="props.book.cover" class="bookImg"/>
                </view>
                <view class="button" @click="navTO">
                    更换教材
                </view>
            </view>
        </view>
        <view class="booklist">
            <view class="tab">
                <view  :class="[
                        item.id === activeTab ? 'activeBg' : '',
                        item.id === activeTab-1 ? 'prevBg' : '',
                        item.id === activeTab+1 ? 'afterBg' : '',
                        'item'
                    ]" 
                    v-for="(item, index) in tab" 
                    :key="index" 
                    @click="handleTab(item.id)"
                >
                    <view :class="[
                        item.id === activeTab ? 'active' : '',
                        item.id === activeTab-1 ? 'prev' : '',
                        item.id === activeTab+1 ? 'after' : '',
                        'tab_mask'
                    ]">
                        <span>{{ item.title }}</span>
                        <view :style="{visibility: item.id === activeTab ? 'unset': 'hidden'}" class="line" />
                    </view>
                </view>
            </view>
            <view class="content">
                <view class="item" v-for="items in booklist" :key="items.id" @click="handleBook(items.id)">
                    <view class="cover">
						<image :src="items.cover" class="cover_image" />
					</view>
					<view class="title">
						{{ items.title }}
					</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import { onLoad, onShow } from '@dcloudio/uni-app';
    import { hasLogin } from '@/utils/tools';
    import { getBannerApi, getYunDuoBookListApi, getMySelfApi } from '@/apis/index';
    const swiperList = ref([]);
    const current = ref(0); 
    const change = (e)=>{
        current.value = e.detail.current;
    }
    // const data = reactive({
    //     book:{
    //         booksId: 1335041,
    //         cover: '/static/english/default-book-1.jpg',
    //         id: 1335041,
    //         title: '人教-英语-新起点-一年级上册',
    //         description: '一年级上册'
    //     }
    // })
    const tab = ref([
        {id: 1, title: 'PEP'},
        {id: 2, title: '新起点'},
        {id: 3, title: '精通版'}
    ])
    const booklist = ref([
        {id: 0, title: '人教-英语-新起点-一年级上册', cover: '/static/english/default-book-1.jpg'},
        {id: 1, title: '人教-英语-新起点-一年级上册', cover: '/static/english/default-book-1.jpg'},
        {id: 2, title: '人教-英语-新起点-一年级上册', cover: '/static/english/default-book-1.jpg'}
    ])
    const props = defineProps({
		book:{
            type: Object,
            default: () => ({})
        },
		swiperList:{
			type: Array,
			default: []
		}
    })
    const activeTab = ref(1);
    onMounted(()=>{
        // getBanner();
		getBookList(activeTab.value);
		// getMySelfBook();
    })
    const getMySelfBook = async() =>{
		const { obj } = await getMySelfApi({course: 'english'})
		if (obj.length){
			data.book = obj[0]
		}
	}
    const getBanner = async() => {
		const {obj} = await getBannerApi({flag: 3})
		const newValue = [obj.banner3, obj.banner4].filter((item, index) => typeof item !== 'number' && item !== null)
		swiperList.value = newValue;
	}
    const handleTab = (e)=>{
        activeTab.value = e;
        getBookList(e)
    }
    const handleRead =() =>{
        const token = uni.getStorageSync('token');
        if(token){
            uni.navigateTo({
                url: `/pages/web-view/index?data=${encodeURIComponent(JSON.stringify({id:props.book.booksId}))}`
            })
        } else {
            uni.navigateTo({
                url: '/pages/login/index'
            })  
        }
    }
    const getBookList = async(id) =>{
		const res = await getYunDuoBookListApi({flag: id})
		booklist.value = res.obj;
	}
    const navTO = ()=>{
		if(hasLogin()){
			uni.navigateTo({
				url: `/pages/select/index?data=${encodeURIComponent(JSON.stringify({course: 'english'}))}`
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
	}
    const handleBook = (e)=>{
		if(hasLogin()){
			uni.navigateTo({
				url: `/pages/web-view/index?data=${encodeURIComponent(JSON.stringify({id:e}))}`
			})
		}else{
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
	}
</script>

<style lang="scss">
    .e_container {
		width: 100vw;
        height: 100vh;
        // padding-left: 30rpx;
        .topBg{
            width: 100%;
            height: 450rpx;
            position: fixed;
            top: 0;
            left: 0;
        }
        .appName{
            color: #9D55F0;
            font-size: 36rpx;
            font-weight: 700;
            padding-top: 116rpx;
            padding-left: 30rpx;
        }
        .swiper-box{
            .swiper{
                height: 346rpx;
            }
            width: calc(100vw - 30rpx);
            height: 346rpx;
            margin-top: 48rpx;
            padding-left: 30rpx;
            // swiper-item{
            //     width: 650rpx !important;
            //     height: 346rpx!important;
            //     margin-right: 20rpx;
            // }
            .swiper-item{
                width: 650rpx;
                height: 346rpx;
				border-radius: 40rpx;
				overflow: hidden;
                .swiper-img{
                    width: 650rpx;
                    height: 346rpx;
                }
            }
        }
        .dot{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 24rpx;
            :not(:first-child){
                margin-left: 16rpx;
            }
            .dot_item{
                width: 12rpx;
                height: 12rpx;
                background: #9D55F0;
                border-radius:6rpx;
                opacity: 0.4;
            }
            .active{
                opacity: unset;
            }
        }
        .read{
            width: 100%;
            height: 480rpx;
            margin-top: 54rpx;
            position: relative;
            display: flex;
            flex-direction: row;
            .readBg{
                width: 100%;
                height: 480rpx;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
            .left{
                margin-left: 70rpx;
                display: flex;
                flex-direction: column;
                .text1{
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #FFFFFF;
                    line-height: 44rpx;
                    display: flex;
                    margin-top: 38rpx;
                    .tipImg{
                        width: 88rpx;
                        height: 44rpx;
                        margin-left: 16rpx;
                    }
                }
                .text2{
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    line-height: 34rpx;
                    margin-top: 8rpx;
                }
                .text3{
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 40rpx;
                    margin-top: 48rpx;
                    margin-left: 32rpx;
                    width: 328rpx;
                }
                .text4{
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #999999;
                    line-height: 34rpx;
                    margin-left: 32rpx;
                    margin-top: 12rpx;
                }
                .button{
                    width: 220rpx;
                    height: 80rpx;
                    background: #FFCC29;
                    box-shadow: inset 0rpx 0rpx 20rpx 0rpx #FFDC6C;
                    border-radius: 40rpx 40rpx 40rpx 40rpx;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 28rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 24rpx;
                    margin-top: 22rpx;
                }
            }
            .right{
                .share{
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #9D55F0;
                    line-height: 28rpx;
                    display: flex;
                    align-items: center;
                    margin-left: 66rpx;
                    padding: unset;
                    .shareImg{
                        width: 36rpx;
                        height: 36rpx;
                        margin-left: 14rpx;
                    }
                }
                .book{
                    margin-top: 62rpx;
                    margin-left: 22rpx;
                    display: flex;
                    flex-direction: row;
                    .deraction{
                        width: 8rpx;
                        height: 240rpx;
                        background: #C99DFC;
                        border-radius: 8rpx 0rpx 0rpx 8rpx;
                    }
                    .bookImg{
                        width: 184rpx;
                        height: 240rpx;
                    }
                }
                .button{
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #9D55F0;
                    line-height: 28rpx;
                    width: 156rpx;
                    height: 60rpx;
                    border-radius: 38rpx 38rpx 38rpx 38rpx;
                    border: 2rpx solid #9D55F0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 26rpx;
                    margin-left: 44rpx;
                }
            }
        }
        .booklist{
            margin: 26rpx 30rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            overflow: hidden;
            .tab{
                width: 100%;
                display: flex;
                flex-direction: row;
                .item{
                    width: calc(100%  / 3);
                    height: 110rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: #F2E7FF;
                    position: relative;
                    .line{
                        position: absolute;
                        top: 60rpx;
                        left: 84rpx;
                        width: 64rpx;
                        height: 14rpx;
                        background: #9D55F0;
                        border-radius: 0rpx 0rpx 0rpx 0rpx;
                        opacity: 0.5;
                    }
                }
                .tab_mask{
                    width: 100%;
                    height: 110rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 40rpx;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 40rpx;
                }
                .prevBg{
                    background: #FFF;
                }
                .afterBg{
                    background: #FFF;
                }
                .active{
                    background: #FFFFFF;
                    border-radius: 40rpx 40rpx 0rpx 0rpx;
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #333333;
                    line-height: 44rpx;
                }
                .prev{
                    background: #F2E7FF;
                    border-radius: 0rpx 0rpx 40rpx 0rpx;
                }
                .after{
                    background: #F2E7FF;
                    border-radius: 0rpx 0rpx 0rpx 40rpx;
                }
            }
            .content{
                width: 100%;
                margin-top: 8rpx;
                margin-left: 12rpx;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-bottom: 190rpx;
                .item{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-left: 20rpx;
                    margin-top: 40rpx;
                    .cover{
                        width: 196rpx;
                        height: 262rpx;
                        border-radius: 20rpx;
                        overflow: hidden;
                        .cover_image{
                            width: 196rpx;
                            height: 262rpx;
                        }
                    }
                    .title{
                        width: 184rpx;
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #333333;
                        line-height: 40rpx;
                    }
                }
            }
        }
    }
</style>